<template>
	<span class="scroll-number">{{ isNaN(output) ? num : (Number.isInteger(output) ? output.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") : output.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',')) }}</span>
</template>

<script setup lang="ts">
import { watch, ref } from 'vue'
import { useTransition, TransitionPresets } from '@vueuse/core'

const props = withDefaults(
	defineProps<{
		startNum?: number
		num: any
		duration?: number
	}>(),
	{
		startNum: 0,
		duration: 3000,
	}
)
const count = ref(props.startNum)
let output
watch(
	() => props.num,
	() => {
		output = useTransition(count, {
			duration: 2000,
			transition: TransitionPresets.easeOutExpo,
		})
		count.value = +props.num
	},
	{
		immediate: true,
	}
)
</script>
